<template>
  <ul class="content_region_list cl">
    <li v-for="(detail,index) in list"
        v-if="index < 6"
        @mouseover="handleMouseover(detail.serveId)" @mouseout="handleMouseout" :class="serveId === detail.serveId ? 'mouse_hover' : ''">
      <div class="content_region_list_head">
        <div class="content_region_list_head_title">
          <span class="iconfont"><img v-lazy="detail.serveMinImg[0]" :key="detail.serveMinImg[0]"/></span>
          <span class="content_region_list_title">{{detail.serveName}}</span>
        </div>
        <span class="iconfont1 "><img v-lazy="detail.serveMinImg[2]" :key="detail.serveMinImg[2]"/></span>
        <span class="iconfont2"><img v-lazy="detail.serveMinImg[1]" :key="detail.serveMinImg[1]"/></span>
      </div>
      <router-link
        :to="'serve?id=' + detail.serveId + '&type=' + detail.serveType + '&serveImg' + detail.serveImg"
        class="use_btn">
        <div class="content_region_list_div">
          <div class="p_list">
            <p>{{detail.serveIntroduce}}</p>
          </div>
        </div>
      </router-link>
    </li>
  </ul>

</template>

<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      serveId: null
    }
  },
  mounted() {

  },
  methods: {
    // 移入
    handleMouseover(serveId) {
      this.serveId = serveId
    },
    // 移出
    handleMouseout() {
      //this.serveId = null
    }
  }
}
</script>

<style scoped>

</style>
